<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>加载动画</title>
	<style>
	* {
	    margin: 0;
	    padding: 0;
	}
	
	html, body {
	    width: 100%;
	    height: 100vh;
	}
	
	.container {
	    position: relative;
	    width: 100%;
	    height: 100vh;
	    /* 设置浮动 */
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background-color: #37474F;
	}
	
	.trans {
	    position: absolute;
	    width: 120px;
	    height: 120px;
	    /* 设置浮动 */
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background: #37474F;
	}
	
	span {
	    position: absolute;
	    color: #fff;
	    z-index: 1;
	}
	
	.trans::after {
	    content: "";
	    position: absolute;
	    width: 115px;
	    height: 115px;
	    background: #37474F;
	    /* 添加边框 */
	    border: 4px solid #3ff9dc;
	    /* 初始化位置 */
	    transform: rotate(45deg);
	    /* 添加动画、动画时间和样式 */
	    animation: rotate1 3s ease-in-out infinite alternate;
	}
	
	.trans::before {
	    content: "";
	    position: absolute;
	    width: 115px;
	    height: 115px;
	    /* 添加边框 */
	    border: 4px solid #ffab91;
	    /* 初始化位置 */
	    transform: rotate(-90deg);
	    /* 添加动画、动画时间和样式 */
	    animation: rotate2 3s ease-in-out infinite alternate;
	}
	
	@keyframes rotate1 {
	    0% {
	        transform: rotate(0deg);
	    }
	    25% {
	        transform: rotate(-90deg);
	    }
	    50% {
	        transform: rotate(-180deg);
	    }
	    75% {
	        transform: rotate(-270deg);
	    }
	    100% {
	        transform: rotate(-360deg);
	    }
	}
	
	@keyframes rotate2 {
	    0% {
	        transform: rotate(0deg);
	    }
	    25% {
	        transform: rotate(90deg);
	    }
	    50% {
	        transform: rotate(180deg);
	    }
	    75% {
	        transform: rotate(270deg);
	    }
	    100% {
	        transform: rotate(360deg);
	    }
	}

</style>
</head>

<body>
    <div class="container">
        <div class="trans">
            <span>加载中...</span>
        </div>
    </div>

</body>

</html>
